What?

This pull request locks the editing of the rich text and the appropriate controls of button and image blocks by default when a binding exists.

Why?

Right now, if sources want to lock the editing when an attribute is bound to it, they have to specify that explicitly. However, the editor APIs are still private, so there is no way to do that for external sources. I believe locking it by default would cover most of the use cases.

Once we add support to editing the custom fields, we can change the default.

How?

I changed the locking conditionals to only unlock the editing when it is set to false and I added that to the pattern overrides source, because they don't need that.

Testing Instructions

Tests should cover the use cases.

For manual testing:

Ensure that the existing bindings keep working as expected:

0. Register a new custom field however you prefer. You can use a snippet similar to this:

register_meta(
	'post',
	'text_custom_field',
	array(
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'string',
		'default'	   => 'This is the content of the text custom field',
	)
);
register_meta(
	'post',
	'url_custom_field',
	array(
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'string',
		'default'	   => 'https://wpmovies.dev/wp-content/uploads/2023/04/goncharov-poster-original-1-682x1024.jpeg',
	)
);

In a page

Test paragraph

1. Add a paragraph with the content connected to a custom field:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"text_custom_field"}}}}} -->
<p>Hello</p>
<!-- /wp:paragraph -->

2. Add a paragraph without any bindings.
3. Check that the paragraph with the bindings became non-editable.
4. Check that the paragraph shows the content of the custom field.
5. Check that the normal paragraph works as expected.
6. Go to the frontend and check that the value of the custom field is shown there.
7. Change the source to a non existing one, update, and check it is non-editable.

Test heading

Repeat the paragraph test but using a heading.

Test button

1. Add a button with the text connected to a custom field.
2. Add another button with the URL connected to a custom field.
3. Add a button with the text and the URL connected to custom fields.

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"text":{"source":"core/post-meta","args":{"key":"text_custom_field"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">TEXT</a></div>
<!-- /wp:button -->

<!-- wp:button {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"url_custom_field"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://wpmovies.dev/wp-content/uploads/2023/03/3bhkrj58Vtu7enYsRolD1fZdja1-683x1024.jpg">URL</a></div>
<!-- /wp:button -->

<!-- wp:button {"metadata":{"bindings":{"text":{"source":"core/post-meta","args":{"key":"text_custom_field"}},"url":{"source":"core/post-meta","args":{"key":"url_custom_field"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://wpmovies.dev/wp-content/uploads/2023/03/3bhkrj58Vtu7enYsRolD1fZdja1-683x1024.jpg">TEXT</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

4. Check that for the buttons with the text connected, they are not editable and they show the content of the custom field.
5. Check that for the buttons with the URL connected, the buttons to change the URL disappear from the UI.
6. Check that everything works in the frontend.

Test image

1. Add an image with the URL connected to a custom field.
2. Add an image with the alt attribute connected to a custom field.
3. Add an image with the title attribute connected to a custom field.
4. Add an image with more than one connection.

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Image url and alt connected</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":134,"sizeSlug":"large","linkDestination":"none","metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"page_url_custom_field"}},"alt":{"source":"core/post-meta","args":{"key":"page_text_custom_field"}}}}} -->
<figure class="wp-block-image size-large"><img src="https://wpmovies.dev/wp-content/uploads/2023/03/3bhkrj58Vtu7enYsRolD1fZdja1-683x1024.jpg" alt="Content of the page_text_custom_field" class="wp-image-134" title="Content of the PAGE text custom field"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Alt connected</h3>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none","metadata":{"bindings":{"alt":{"source":"core/post-meta","args":{"key":"page_text_custom_field"}}}}} -->
<figure class="wp-block-image size-large"><img src="https://wpmovies.dev/wp-content/uploads/2023/04/q6y0Go1tsGEsmtFryDOJo3dEmqu-683x1024.jpg" alt="Content of the page_text_custom_field" title=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Nothing connected</h3>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wpmovies.dev/wp-content/uploads/2023/04/q6y0Go1tsGEsmtFryDOJo3dEmqu-683x1024.jpg" alt=""/></figure>
<!-- /wp:image -->

5. For the images with the URL connected, check that the related buttons to link an image have disappeared and the image shows the URL from the custom field.
6. For the images with the alt/title connected, check that, in the right sidebar, they are disabled. Showing the value of the custom field instead and a message saying it is connected to custom fields.

In a template

Go to a page template, for example, and repeat the process. In this case, the blocks can't show the value of the custom fields because it depends on each page. They should show a placeholder instead.

Test pattern syncing overrides

1. Go to the Site Editor -> Patterns -> Create new synced pattern.
2. Add a paragraph, go to the Advanced section, and enable "Allow instance overrides".
3. Add a heading, go to the Advanced section, and enable "Allow instance overrides".
4. Add an image block, upload or select any media, go to the Advanced section, and enable "Allow instance overrides".
5. Add a button block, go to the Advanced section, and enable "Allow instance overrides".
6. Check that you can edit all the attributes.
7. Go to a page an insert the new pattern.
8. Modify the values of the blocks.
9. Check that the updated values are reflected in the frontend